<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" 
	content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>餐饮网站-搜索模块-俞健澄</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <style type="text/css">
    	  .search{
    background-image: url(images/banner.jpg);
    background-size: cover;
    -webkit-background-size: cover;
    min-height: 600px;
    margin-top: -20px;
}
.reservation {
    padding: 60px 60px;
    width:50%;
    background: rgba(255, 255, 255, 0.7);
    margin: 0 auto;
    margin-top:15%;
    font-weight: 500;
    color: #f2f0f1;
    font-size: 1.2em;
    outline: none;
}
.btn{
    width: 50% ;
    background: #D96B66;
    color: #fff;
    padding: 5px;
    border: none;
    border-radius: 4px;
    -webkit-border-radius: 4px;
}
    </style>
	</head>
	<body>
		<!--搜索区域-->
<div class="search" >
    <div class="container">
        <div class="reservation">
            <form class="form-horizontal" role="form">
                <div class="form-group">
                    <div class="col-sm-12 col-md-12 col-lg-12">
                        <input type="text" class="form-control input-lg" id="name" placeholder="请输入餐厅名称">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-12 col-md-12 col-lg-12">
                        <select id="country"  class="form-control input-lg">
                            <option value="null">请选择城市</option>
                            <option value="bj">北京</option>
                            <option value="sh">上海</option>
                            <option value="sz">深圳</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <div class="searchbtn">
                        <button type="submit" class="btn btn-success btn-lg">
                            <img src="images/search-icon.png">&nbsp;搜索</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- 搜索区域结束 -->
		<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="UTF-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="UTF-8"></script>
	</body>
</html>
